<template>
  <a-drawer
    v-if="visible"
    class="small"
    width="80%"
    title="LD/SO打色"
    placement="right"
    :visible="visible"
    @close="cancel"
  >
    <remote-table
      v-model:value="state.dataSoure"
      show-setting
      interface-u-r-l="/pro-proof/page"
      :sy="530"
      :y="680"
      :select-row-keys="state.selectRowKeys"
      row-type="radio"
      :api-params="apiParams"
      :query-fields="queryField"
      tableId="material-LD"
      menu-name="material-LD/SO"
      @change="onChange"
    >
      <template #urlsCR="{ record }">
        <div class="ma" v-if="record.urls && record.urls.length > 0">
          <viewImg
            v-if="
              ['png', 'jpg', 'jpeg', 'gif'].includes(
                record.urls[0].ossUrl
                  .substring(record.urls[0].ossUrl.lastIndexOf('.') + 1)
                  .toLowerCase()
              )
            "
            class="h100 df aic jcc w100"
            :src="record.urls[0].ossUrl"
            :listSrc="record.urls.map(item => item.ossUrl)"
          ></viewImg>

          <a v-else @click="downloadImg(record.urls[0])">{{
            record.urls[0].ossName
          }}</a>
        </div>
        <img
          v-else
          src="../../assets/img/no-picture.png"
          style="height: 40px; width: auto"
          alt=""
        />
      </template>
      <template #stateCR="{ record }">
        <div>
          <a-badge status="success" />
          {{ record.stateStr }}
        </div>
      </template>
    </remote-table>
    <div class="fixedBottom">
      <a-row type="flex" justify="end">
        <div>
          <a-button
            size="small"
            :style="{ marginRight: '8px' }"
            @click="cancel"
          >
            返回
          </a-button>
          <!-- 选中数据将覆盖当前行项目。 -->
          <a-button type="primary" size="small" @click="submit">
            确认
          </a-button>
        </div>
      </a-row>
    </div>
  </a-drawer>
</template>
<script setup>
import { reactive, computed, watch } from 'vue'
import { message } from 'ant-design-vue'
const props = defineProps({
  value: {
    type: Boolean,
    default: false
  },
  colorNumber: {
    type: String,
    default: null
  },
  color: {
    type: String,
    default: null
  },
  supplierCode: {
    type: String,
    default: null
  },
  status: {
    type: [String, Number],
    default: null
  },
  siftType: {
    type: Number,
    default: null
  }
})
const state = reactive({
  dataSoure: [],
  selectedRows: [],
  selectRowKeys: []
})
const visible = computed(() => props.value)

const apiParams = computed(() => {
  const params = {}
  if (props.supplierCode) {
    params.supplierCode = [props.supplierCode]
  }
  if (props.status) {
    params.state = [props.status]
  }
  if (props.siftType) {
    params.siftType = props.siftType
  }
  return params
})
/**
 * 筛选过滤
 */
const queryField = computed(() => {
  const params = []
  if (props.supplierCode) {
    params.push({
      fieldName: 'supplierCodeFilter',
      fieldValue: props.supplierCode
    })
  }
  if (props.status) {
    params.push({
      fieldName: 'stateFilter',
      fieldValue: props.status
    })
  }
  if (props.siftType) {
    params.push({
      fieldName: 'stateFilterExclude',
      fieldValue: '6,7'
    })
  }
  return params
})

const emits = defineEmits(['submitColor', 'close'])

watch(
  () => state.dataSoure,
  val => {
    if (val) {
      if (props.colorNumber || props.color) {
        const obj =
          state.dataSoure.find(
            item =>
              item.colorNumber === props.colorNumber ||
              item.color === props.color
          ) || null
        if (obj) {
          state.selectRowKeys = [obj.id]
          state.selectedRows = [obj]
        }
      }
    }
  },
  {
    immediate: true
  }
)
const onChange = (keys, rows) => {
  state.selectedRows = rows
  state.selectRowKeys = keys
}
const clearSelect = () => {
  state.selectedRows = []
  state.selectRowKeys = []
}
const cancel = () => {
  emits('close')
}
const submit = () => {
  if (state.selectedRows.length > 1) {
    message.info('请选择不多于一条的数据')
  } else {
    if (+state.selectedRows[0].state !== 5) {
      message.warn('当前选中颜色非Approved状态。')
    }
    emits('submitColor', state.selectedRows)
    cancel()
  }
}
defineExpose({
  clearSelect
})
</script>
<style lang="scss" scoped></style>
